<template>
  <a-modal
    width="370px"
    v-model="modalVisible"
    :bodyStyle="bodyStyle"
    :destroyOnClose="true"
    :maskClosable="false"
    :title="title"
    @cancel="cancel"
  >
    <template slot="footer">
      <a-button key="back" @click="cancel" :disabled="loading"> 取消 </a-button>
      <a-button key="submit" @click="save" type="primary" :loading="loading">
        确定
      </a-button>
    </template>
    <a-spin :spinning="tree.spinning">
      <a-row>
        <a-col>
          <a-card class="eip-admin-card-small" size="small">
            <a-directory-tree
              v-if="tree.data.length > 0"
              checkable
              :checkStrictly="true"
              :style="tree.style"
              :tree-data="tree.data"
              :icon="treeIcon"
              :checkedKeys="tree.checkedKeys"
              @check="onCheck"
            >
            </a-directory-tree>

            <a-empty
              :style="tree.style"
              v-if="tree.data.length == 0"
              description="无模块信息"
            />
          </a-card>
        </a-col>
      </a-row>
    </a-spin>
  </a-modal>
</template>

<script>
import { menu, save, privilegeMaster } from "@/services/system/permission/menu";
export default {
  name: "menu-permission",
  data() {
    return {
      bodyStyle: {
        padding: "4px",
        "background-color": "#f0f2f5",
      },
      tree: {
        style: {
          overflow: "auto",
          height: "400px",
        },
        data: [],
        spinning: false,
        checkedKeys: [],
      },
      param: {
        privilegeAccess: this.$privilegeAccess.menu,
        menuPermissions: "",
        privilegeMaster: "",
        privilegeMasterValue: "",
      },
      modalVisible: this.visible,
      loading: false,
    };
  },
  watch: {
    visible(val) {
      this.modalVisible = val;
    },
  },

  props: {
    visible: {
      type: Boolean,
      default: false,
    },

    title: {
      type: String,
    },
  },

  methods: {
    /**
     * 树图标
     */
    treeIcon(props) {
      const { slots } = props;
      return <a-icon type={slots.icon} />;
    },

    /**
     * 取消
     */
    cancel() {
      this.tree.data = [];
      this.tree.checkedKeys = [];
      this.$emit("close");
    },

    /**
     * 初始化菜单
     */
    menuInit(master, masterValue) {
      let _this = this;
      _this.param.privilegeMaster = master;
      _this.param.privilegeMasterValue = masterValue;
      _this.tree.spinning = true;
      menu().then((result) => {
        _this.tree.data = result.data;
        privilegeMaster(masterValue, master, _this.$privilegeAccess.menu).then(
          (result) => {
            result.data.forEach((item) => {
              this.tree.checkedKeys.push(item.privilegeAccessValue);
            });
            _this.tree.spinning = false;
          }
        );
      });
    },

    /**
     * 选择
     */
    onCheck(checkedKeys) {
      this.tree.checkedKeys = [];
      checkedKeys.checked.forEach((item) => {
        this.tree.checkedKeys.push(item);
      });
    },

    /**
     * 保存
     */
    save() {
      let _this = this;
      let menuPermissions = [];
      this.tree.checkedKeys.forEach((item) => {
        menuPermissions.push({ p: item });
      });
      _this.param.menuPermissions = JSON.stringify(menuPermissions);
      _this.loading = true;
      save(_this.param).then((result) => {
        if (result.code === _this.$resultCode.success) {
          _this.$message.success(result.msg);
          _this.cancel();
        } else {
          _this.$message.error(result.msg);
        }
        _this.loading = false;
      });
    },
  },
};
</script>

<style lang="less" scoped></style>
